<template>
	<view class="income">
		<view class="income_top"></view>
		<view class="title">
			<view class="title_top">
				<view class="view1">
					<img :src="mineInfo.avatar" class="img"></img>
					<text>{{mineInfo.nick_name}}</text>
				</view>
				<view class="view2">
					{{saleDate.amount?saleDate.amount/100:0}}
				</view>
				<view class="view3">
					可提现余额（元）
				</view>

				<view class="dw" @click="openPage('pageD','withdrawal')">
					<text>去提现</text>
					<!-- <image src="../../static/arrow2.png" class="img"></image> -->
				</view>
			</view>
		<!-- 	<view class="title_bottom">
				<view class="item">
					<text>今日收益</text>
					<text>￥10</text>
				</view>
				<view class="item">
					<text>昨日收益</text>
					<text>￥20</text>
				</view>
			</view> -->
		</view>

		<view class="packet">
			<view class="top">
				<view :class="navIndex==index?'item item_active':'item'" v-for="(item,index) in categorys" :key="index"
					@click="navClick(index,item.id)">{{item.name}}</view>
			</view>
			<view class="bottom">
				<view class="item" v-for="(item,index) in packetList" :key="index">
					<view class="item_left">
						<image
							src="https://imgs.ynz666.com/test/2023/07/18/OGQxZjM3OWMxM2VkMmNhN2I3NGVmZmE0NmNmNTI4Yzg=.png"
							mode="scaleToFill" class="img" v-if="item.type==1"></image>
						<image
							src="https://imgs.ynz666.com/test/2023/07/18/ODJlZWQwOTc0M2NmZTIyNzdiM2ZmZWYxYzY5YjQ5NzE=.png"
							mode="scaleToFill" class="img" v-if="item.type==2"></image>


						<view class="right">
							<view class="view1" v-if="item.type==1">
								到账
							</view>
							<view class="view1" v-if="item.type==2">
								支出
							</view>
							<view class="view2">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view class="item_right">
						<text v-if="item.type==1">+</text>
						<text v-if="item.type==2">-</text>
						{{item.amountTow}}
					</view>
				</view>
				<view class="item_kong" v-if="packetList.length==0">
					<image class="kong_img" src="../../static/order_kong.jpg"></image>
					<view class="kong_text">
						呜呜，你暂时还没有明细记录
					</view>
				</view>
			</view>
			
		</view>


    
		<view class="maskFour" v-if="modalFree">
			<view class="maskFour_box">
				<image
					src="https://imgs.ynz666.com/2023/12/06/NzYyMGMzMjVmOGZjZjI5MTQwYjgzYTcxOWQ1ODA2NzU=.png"
					mode="scaleToFill" class="free_img"></image>
					<image
						src="https://imgs.ynz666.com/2023/12/06/OTIyMTYyZjRlOTJjNTAwZWVlYTY5ZTg3YzMxMmU2MmM=.png"
						mode="scaleToFill" class="free_btn" @click="getFreeCard(1)"></image>
					<image
						src="https://imgs.ynz666.com/test/2023/11/07/YzkzMDgxYzEwM2Y0YjQ1N2QyMDcxOWFlMThhYjdlZWQ=.png"
						mode="scaleToFill" class="free_close" @click="getFreeCard(2)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		getWalletDetail,
		getWalletLog
	} from '../../apis/index.js';
	export default {
		data() {
			return {
				saleDate:{},
				mineInfo:{},
				navIndex: 0,
				categorys: [{
						name: '全部明细',
					},
					{
						name: '入账'
					},
					{
						name: '支出'
					}
				],
				par: {
					type: 0,
					page: 1,
					pageSize: 10,
					walletType: 1,// 钱包类型 1.账户余额 2.红包余额
				},
				packetList: [],
				isLastPage: false,
				
				modalFree:false,
			}
		},
		onShow() {
			let that = this;
			that.mineInfo = uni.getStorageSync('mineInfo');
			this.SaleDate();
			this.SaleDetails();
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.par.page++;
				this.SaleDetails();
			}
		},
		methods: {
			getFreeCard(index){
				if(index==1){
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				this.modalFree=false
			},
			SaleDate() {
				//钱包类型 1.账户余额 2.红包余额
				let that = this;
				getWalletDetail({
					walletType: 1
				}).then(res => {
					that.saleDate = res.data
					console.log(that.saleDate,"that.saleDate")
				})
			},
			openPage(pageBig, page) {
				if(page=="withdrawal"){
					// 先判断在平台有没有完成首单消费
					if(this.saleDate.completedOrder){
						uni.navigateTo({
							url: `/${pageBig}/${page}/${page}`
						})
					}else{
						this.modalFree=!this.saleDate.completedOrder
					}
					return;
				}
				uni.navigateTo({
					url: `/${pageBig}/${page}/${page}`
				})
			},
			navClick(index) {
				this.packetList = []
				this.par.page = 1
				this.par.type = this.navIndex = index
				this.SaleDetails()
			},
			SaleDetails() {
				let that = this;
				getWalletLog(this.par).then(res => {
					that.packetList = that.par.page == 1 ? res.data.data.map(item => {
						return Object.assign({
							amountTow: item.amount / 100
						}, item)
					}) : that.packetList.concat(res.data.data
						.map(item => {
							return Object.assign({
								amountTow: item.amount / 100
							}, item)
						}));
					that.isLastPage = res.data.is_last_page;
					console.log(that.packetList, "that.packetList")
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.income {
		width: 100%;

		.income_top {
			height: 30rpx;
		}

		.title {
			margin: 0 30rpx;
			// height: 380rpx;
			height: 280rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.title_top {
				width: 100%;
				height: 280rpx;
				background: linear-gradient(228deg, rgba(244, 59, 0, 1) 0%, rgba(244, 59, 0, 0.8) 100%);
				border-radius: 24rpx;
				position: relative;

				.view1 {
					padding: 20rpx 0 0 30rpx;
					display: flex;
					align-items: center;

					.img {
						width: 48rpx;
						height: 48rpx;
						border: 1px solid #FFFFFF;
						border-radius: 50%;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						padding-left: 7rpx;
					}
				}

				.view2 {
					font-size: 60rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					margin: 50rpx 0 0 0;
					padding-left: 30rpx;
				}

				.view3 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					padding-left: 30rpx;
					opacity: 0.8;
				}

				.dw {
					width: 148rpx;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 100rpx 0px 0px 100rpx;
					position: absolute;
					bottom: 50rpx;
					right: 0;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(244, 59, 0, 1);
						padding-left: 20rpx;
					}

					.img {
						width: 26rpx;
						height: 26rpx;
					}
				}
			}

			.title_bottom {
				height: 100rpx;
				margin: 0rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;

					text:nth-child(1) {
						color: #666666;
					}

					text:nth-child(2) {
						color: rgba(244, 59, 0, 1);
						padding-left: 10rpx;
					}
				}
			}
		}

		.packet {
			width: 100%;
			background: #F4F4F4;
			border-radius: 42rpx 42rpx 0rpx 0rpx;

			.top {
				display: flex;
				align-items: baseline;
				margin: 0 40rpx;
				padding: 30rpx 0;

				.item {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-right: 72rpx;
				}

				.item_active {
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.bottom {
				margin: 0 20rpx;

				.item {
					padding: 0 23rpx;
					height: 150rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item_left {
						display: flex;
						align-items: center;

						.img {
							width: 68rpx;
							height: 68rpx;
							border-radius: 20rpx;
						}

						.right {
							padding-left: 30rpx;

							.view1 {
								font-size: 30rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
							}

							.view2 {
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								padding-top: 10rpx;
							}
						}
					}

					.item_right {
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #F43B00;
					}
				}
				.item_kong {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding-top: 100rpx;
				
					.kong_img {
						width: 228rpx;
						height: 228rpx;
						border-radius: 50%;
					}
				
					.kong_text {
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						width: 440rpx;
						text-align: center;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
	
	.maskFour {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.65);
	
		.maskFour_box {
			width: 600rpx;
			overflow: hidden;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.free_img {
				width: 600rpx;
				height: 600rpx;
			}
			.free_btn{
				width: 361rpx;
				height: 88rpx;
				margin: 30rpx 0 25rpx;
			}
			.free_close{
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
</style>
